<template>
  <div class="content">
    <div class="header">
      <i class="icon-fanhui go_back" @click="goBack"></i>
      <span class="title">工单详情</span>
      <el-button size="small" type="primary" plain style="position: absolute;right: 25px;top: 30px" @click="dialogVisible = true" v-if="form.orderStatus != 2">关闭工单</el-button>
    </div>
    <div class="item">
      <p class="item_title">工单基本信息</p>
      <div class="item_center">
        <span class="item_label">标题：</span>
        <span style="display: inline-block; width: 180px">{{form.title}}</span>
        <span class="item_label">优先级：</span>
        <span v-if="form.orderLevel == '0'">普通</span>
        <span v-if="form.orderLevel == '1'">紧急</span>
      </div>
      <div class="item_center">
        <span class="item_label">状态：</span>
        <span v-if="form.orderStatus == 0" style="display: inline-block; width: 180px">未受理</span>
        <span v-if="form.orderStatus == 1" style="display: inline-block; width: 180px">受理中</span>
        <span v-if="form.orderStatus == 2" style="display: inline-block; width: 180px">已关闭</span>

        <span class="item_label">联系时间：</span>
        <span v-if="form.replyTimeType == '0'">任何时间</span>
        <span v-if="form.replyTimeType == '1'">工作日（周一 ~ 周五）9:00 - 18:00</span>
      </div>
      <div class="item_center">
        <span class="item_label">手机号：</span>
        <span style="display: inline-block; width: 180px">{{form.phone}}</span>
        <span class="item_label">邮箱：</span>
        <span>{{form.email}}</span>
      </div>
      <div class="item_center">
        <span class="item_label">类别：</span>
        <span>{{form.orderType}}</span>
      </div>
      <div class="item_center">
        <span class="item_label">问题描述：</span>
        <span>{{form.description}}</span>
      </div>
    </div>
    <div class="item">
      <p class="item_title">沟通记录</p>
      <div class="item_center connect" v-for="(item,index) in form.communications" :key="index">
        <img :src="item.userPic" class="header_img"/>
        <div>
          <span class="user_name">{{item.userName}}</span>
          <p class="user_message">{{item.content}}</p>
          <span class="connect_time">{{item.createTime}}</span>
        </div>
      </div>
      <span ></span>
    </div>
    <div class="item">
      <p class="item_title">提交留言</p>
      <div v-if="form.orderStatus !== 2">
        <div class="item_center connect">
          <span class="item_label" style="width: 73px">留言：</span>
          <el-input
            type="textarea"
            :rows="4"
            style="width: 800px"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
        </div>
        <el-button type="primary" size="small" style="margin-left: 135px" @click="addMessage">提交</el-button>
      </div>

      <div v-else>
        <div class="item_center">
          <span class="item_label">评价：</span>
          <el-rate
            style="display: inline-block"
            v-model="form.evaluateLevel"
            :disabled="form.isEvaluated">
          </el-rate>
        </div>
        <div class="item_center">
          <span class="item_label">问题是否解决：</span>
          <div style="display: inline-block" v-if="!form.isEvaluated">
            <el-radio v-model="form.isSolved" :label="true">已解决</el-radio>
            <el-radio v-model="form.isSolved" :label="false">未解决</el-radio>
          </div>
          <div style="display: inline-block" v-else>
            <span v-if="form.isSolved">已解决</span>
            <span v-if="!form.isSolved">未解决</span>
          </div>
        </div>
        <div class="item_center connect">
        <span class="item_label">意见与反馈：</span>
        <el-input
          type="textarea"
          style="width: 800px"
          :rows="2"
          placeholder="请输入内容"
          v-if="!form.isEvaluated"
          v-model="form.remarks">
        </el-input>
        <span v-else>{{form.remarks}}</span>
      </div>

        <div class="item_center connect" v-if="form.isEvaluated">
          <span class="item_label">评价时间：</span>
          <span>{{form.modifyTime}}</span>
        </div>

        <div class="item_center">
          <span class="item_label"></span>
          <el-button size="small" type="primary" v-if="!form.isEvaluated" @click="submit">提交</el-button>
        </div>
      </div>

    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      width="470px"
      center>
      <span slot="title" class="dialog-title">关闭工单提醒</span>
      <div style="color: #232323;text-align: center;">
                <span style="font-weight: 600">
                                      当您确认工单问题已经得到解决，您可关闭工单。

        </span>
        <p style="font-weight: 600">
          关闭工单后如果有新的问题，您可以提交新的工单咨询。
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
    <el-button type="primary" @click="closeFeedback" size="small">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import {workOrderDetail, workOrderCommunication, workOrderClose, evaluate} from '@/api/feedback'
    export default {
        data() {
            return {
                textarea: '',
                value:0,
                dialogVisible:false,
                close: false,
                form:{},
                radio: '0'
            }
        },
        created() {
          this.init()
        },
        methods: {
            init() {
                workOrderDetail(this.$route.params.id).then(res => {
                    this.form = res.data.data
                })
            },
            goBack() {
                this.$router.go(-1)
            },
            closeFeedback() {
                workOrderClose(this.$route.params.id).then(res => {
                    if(res.data.success) {
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        })
                        this.dialogVisible = false
                        this.close = true
                        this.init()
                    }
                })
            },
            addMessage() {
                workOrderCommunication(this.$route.params.id, this.textarea).then(res => {
                  if(res.data.success) {
                      this.textarea = ''
                      this.init()
                  }
                })
            },
            submit() { // 提交
                evaluate(this.$route.params.id, this.form.evaluateLevel, this.form.isSolved, this.form.remarks).then(res => {
                  if(res.data.success) {
                      this.$message({
                          type: 'success',
                          message: res.data.msg
                      })
                      this.init()
                  }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
  .go_back{
    font-size: 25px !important;
    color: #2A97F9;
    cursor: pointer;
  }
  .title{
    font-size: 18px;
    font-weight: 600;
    color: #435B77;
    margin-left: 10px;
  }
  .item_title{
    color: #2A97F9;
    background-color:#EAF0F6 ;
    line-height: 30px;
    padding-left: 36px;
  }
  .item{
    margin-top: 25px;
  }
  .item_center{
    padding: 10px 37px;
  }
  .item_label{
    display: inline-block;
    width: 92px;
  }
  .header_img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
  }
  .connect{
    display: flex;
    align-items: end;
    padding: 10px 37px;
  }
  .user_name{
    color: #435B77;
    font-weight: 600;
  }

  .user_message{
    color: #435B77;
  }
  .connect_time{
    color:#8C8C8C ;
    font-size: 12px;
  }
  .content{
    background-color: white;
    padding:30px 25px;
    font-size: 13px;
    position: relative;
  }
</style>
